<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿京东导航栏</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font: 14px/1.4 "PingFang SC", Microsoft YaHei;
        background: #f5f5f5;
    }

    .tab {
        width: 600px;
        margin: 40px auto;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }

    .tab-nav ul {
        display: flex;
        list-style: none;
        background: #fafafa;
        border-bottom: 1px solid #e6e6e6;
    }

    .tab-nav a {
        display: block;
        padding: 0 24px;
        height: 46px;
        line-height: 46px;
        color: #333;
        text-decoration: none;
        transition: background .25s;
    }

    .tab-nav a.active {
        background: #fff;
        color: #e1251b;
        border-bottom: 2px solid #e1251b;
        font-weight: 600;
    }

    .tab-content {
        position: relative;
        height: 300px;
    }

    .tab-content .item {
        position: absolute;
        inset: 0;
        display: none;
        justify-content: center;
        align-items: center;
        font-size: 48px;
        color: #ccc;
    }

    .tab-content .item.active {
        display: flex;
    }

    .tab-content img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
</style>
</head>

<body>
    <div class="tab">
        <nav class="tab-nav">
            <ul>
                <li><a href=" " class="active">百货</a></li>
                <li><a href="#">亏贼bro</a></li>
                <li><a href="#">伤心光棍</a></li>
                <li><a href="#">没有蛀牙</a></li>
                <li><a href="#">纯纯神人</a></li>
            </ul>
        </nav>

        <div class="tab-content">
            <div class="item active">
                <img src="img/蒂蒂2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/小驴.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/特雷西亚.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/爱与恨德克萨斯.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/娜美.jpg" alt="">
            </div>
        </div>
    </div>

    <script>
        const ul = document.querySelector('.tab-nav ul');
        const items = document.querySelectorAll('.tab-content .item');

        ul.addEventListener('click', function (e) {
            if (e.target.tagName !== 'A') return;


            document.querySelector('.tab-nav .active').classList.remove('active');
            e.target.classList.add('active');


            const idx = Array.from(ul.children).indexOf(e.target.parentElement);
            document.querySelector('.tab-content .active').classList.remove('active');
            items[idx].classList.add('active');
        });
    </script>
</body>

</html>